<template>
  <div style="margin-bottom: 62px;">
    <!-- 搜索框组件 -->
    <van-search
  v-model="value"
  show-action
  label="地址"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
  
   
   
   
    <!--轮播图  -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :style="{ h: 900 }">
      <div class="van-swipe__track">
        <van-swipe-item>
          <img src="../assets/zchcss/lb1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/zchcss/lb5.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/zchcss/lb3.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/zchcss/lb4.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/zchcss/lb2.jpg" alt="" />
        </van-swipe-item>
      </div>
    </van-swipe>

    <!-- 公告栏 -->
    <van-notice-bar class="ww"
      left-icon="volume-o"
      text="我是吴荣光，理性追星，理性购买，鸿星尔克，吴亦不凡！     鸿星尔克 To be Number one...... 河南加油....."
      background="balck"
      delay="1"
      speed="50"
    />

    <!-- 九宫格 -->
    <van-grid :column-num="3"  :boder="false" >
      <van-grid-item v-for="(item, i) in arr" :key="i" to="/together">
        <img :src="arr[i].imgurl" alt="" />
        <div>{{ arr[i].text }}</div>
      </van-grid-item>
    </van-grid>

    <!-- 今日推荐 -->
    <div id="aa">
      <!-- animate__shakeX -->
      <div class=" animate__animated animate__heartBeat">今日推荐</div>
     
        <router-link :to="`/fenlei`">  
      
          <p>更多内容>>></p>

        </router-link>
    </div>


    <!-- 文章栏目 -->
 <van-row type="flex" justify="space-around" style=" margin-bottom: 100px;">
  
    <van-col span="11"  v-for="(item,i) of arrs" :key="i" style="margin-top:50px">
        <router-link :to="`/articles?id=${item.id}`"> 
          <div class="xiaomi">  
          <img :src="item.pic" alt="">
          <p>编号:{{item.id}}</p>
          <p>名字:{{item.name}}</p>
          </div> 
        </router-link>
     
    </van-col>
  <!-- -->

    <!-- <van-col span="11">
      <div class="xiaomi" v-for="(item,i) of arrss" :key="i">
        <router-link :to="`/articless?id=${item.id}`">
          <img :src=item.pic alt="">
          <p>编号:{{item.id}}</p>
          <p>名字:{{item.name}}</p>
        </router-link>
      </div>
    </van-col> -->
</van-row>


    <!-- 底边  下面的五个分类  可以改但是就是我们 还有就是要改五个 还有路由-->
           <xrzp-tabbar></xrzp-tabbar>
    <!-- 使用组件 -->
 
</div>
</template>

<script>

export default {
  data() {
    return {
      value:"44",
      active: "",
      dactive: "home",
      value: "",
      h: "180px",
      loading:false,
      finished:false,
      loading: false,
      finished: false,
      refreshing: false,
      immediate:false,
      counts:2,
      arrs:[],
      arrss:[],
      arr: [
        { imgurl: require("../assets/zchcss/chihuo.png"), text: "吃货达人" },
        { imgurl: require("../assets/zchcss/shengqian.png"), text: "省钱攻略" },
        { imgurl: require("../assets/zchcss/happy.png"), text: "开心一刻" },
        { imgurl: require("../assets/zchcss/yizhou.png"), text: "一周最热" },
        { imgurl: require("../assets/zchcss/tijian.png"), text: "体检报告" },
        { imgurl: require("../assets/zchcss/huiyuan.png"), text: "会员专属" },
      ],
      // img:'',
      // title:'',
      // from:'',
      list:[]
    };
  },

  
   
    methods:{
    //搜索框功能
    onSearch(){
    this.axios.get(`/recipe/search?keyword=${this.value}&num=20&appkey=5a432523cf279ce2`).then(res=>{ 
      this.arrs  = res.data.result.list  
      })
     },

    open(){
      this.show = true;
       },
    onLoad(){
    //按发送请求 
   // this.axios.get(`/recipe/byclass?classid=${this.counts}&start=10&num=12&appkey=5a432523cf279ce2`).then(res=>{ 
  //  this.arrss = res.data.result.list})
   // this.counts++
   // this.loading=false
    
    }
     
     },


  mounted() {
    //  console.log(window.screen.width)
      // console.log(window.screen.height)
    //通过公式 计算轮播图的应该设置的高度
    let picwidth = 690;
    let picheight = 180;
    let screenwidth = window.screen.width;
    let height = Math.floor((picheight * screenwidth) / picwidth) + "px";
    this.h = height;
     //按id搜索
     this.axios.get("/recipe/search?keyword=稀饭&num=40&appkey=5a432523cf279ce2").then(res=>{ 
     this.arrs = res.data.result.list})

    
    //按类名搜素
    this.axios.get(`/recipe/byclass?classid=${this.counts}&start=10&num=40&appkey=5a432523cf279ce2`).then(res=>{ 
    this.arrss = res.data.result.list})
   },
}
</script>

<style scoped>
/* 搜索框样式 */
.van-search {
  background-color: #7bb7fd !important;
}

/* 轮播图样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

img {
  width: 100%;
  height: 180px;
 
}

.my-swipe .van-swipe__track {
  height: 180px;
}


 #aa .animate__animated {
   /* animation-iteration-count:infinite, */
   animation-duration: 1.8s;
   animation-iteration-count:3000000000000000000000000000000;
   font-size:18px;
   display: inline-block;
   margin-left: 20px;
   color: #FF0000;
   text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444; 
   line-height: 30px;
  

}


#aa p {
  display: inline;
  margin-left: 186px;
  font-size: 14px;
  color: #696969;
  
}

#aa {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  color: #8f8f8f;
  background-color: white;
}


/* 九宫格样式 */
.van-grid-item__content img {
  height: 30px;
  width: 30px;
}
/* 文字图片距离 */
.van-grid-item__content div {
  margin-top: 10px;
}
/* 文字样式 */
.van-grid {
  font-size: 12px;
  border: none;
}

.van-row {
  margin-top: -20px;
}

/* 底部导航栏标签 */
.van-tabbar-item__text img {
  width: 25px;
  height: 25px;
  display: block;
  margin-left: 1px;
}

.van-tabbar-item__text span {
  font-size: 12px;
  margin-top: 50px;
}



/* 文章 */
.van-list {
  flex-direction: column;
}


.van-col {
  flex-direction: column;
  display: flex;
  justify-content: space-between !important;;
  margin-top: 5px;
  width: 180px;
  height: 100px;
}

.van-row .van-col:nth-child(2) {
    margin-left: 14px;
} 

.xiaomi {
  border-radius: 20px;
}

.xiaomi img {
  border-radius: 20px;
  width: 180px;
  height: 100px;
}

.xiaomi p{
  font-size: 13px;
  color: #666;
}


body {
  height: 100%;
}



*{margin: 0px; padding: 0px;}


</style>
